<template>
  <div class="wrapper">
    <img v-for="(item, index) in imgList" :key="index" :src="item" />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  const props = defineProps({
    value: {
      type: [Array, String],
      default: () => []
    }
  })
  const imgList = computed(() => {
    if (Array.isArray(props.value)) {
      return props.value
    }
    return props.value?.split(',') || []
  })
</script>

<style scoped lang="scss">
  .wrapper {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-bottom: 2px;

    img {
      width: 6px;
      margin-right: 1px;
    }
  }
</style>
